<template>
  <div class="analytics-overview">
    <el-row :gutter="20">
      <!-- 数据概览 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>数据概览</span>
          </template>
          <el-row :gutter="20">
            <el-col :xs="12" :sm="8" :md="6" v-for="metric in metrics" :key="metric.title">
              <div class="metric-card">
                <div class="metric-value">{{ metric.value }}</div>
                <div class="metric-title">{{ metric.title }}</div>
                <div class="metric-trend" :class="metric.trend">
                  <el-icon size="12">
                    <TrendCharts />
                  </el-icon>
                  {{ metric.change }}
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 趋势图 -->
      <el-col :xs="24" :lg="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-radio-group v-model="timeRange">
                <el-radio-button label="7d">7天</el-radio-button>
                <el-radio-button label="30d">30天</el-radio-button>
                <el-radio-button label="90d">90天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <div class="chart-placeholder">
              <el-icon size="80" style="color: #ddd;">
                <TrendCharts />
              </el-icon>
              <p style="color: #999; margin-top: 10px; font-size: 16px;">趋势图表将在这里显示</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 统计排行 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <span>页面访问排行</span>
          </template>
          <div class="ranking-list">
            <div class="ranking-item" v-for="(item, index) in pageRanking" :key="index">
              <div class="ranking-number" :class="'rank-' + (index + 1)">
                {{ index + 1 }}
              </div>
              <div class="ranking-info">
                <div class="page-title">{{ item.page }}</div>
                <div class="page-views">{{ item.views }} 次访问</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 地域分布 -->
      <el-col :xs="24" :md="12">
        <el-card>
          <template #header>
            <span>地域分布</span>
          </template>
          <div class="region-stats">
            <div class="region-item" v-for="region in regionData" :key="region.name">
              <div class="region-name">{{ region.name }}</div>
              <div class="region-progress">
                <el-progress 
                  :percentage="region.percentage" 
                  :stroke-width="8"
                  :show-text="false"
                />
              </div>
              <div class="region-value">{{ region.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 设备统计 -->
      <el-col :xs="24" :md="12">
        <el-card>
          <template #header>
            <span>设备统计</span>
          </template>
          <div class="device-stats">
            <div class="device-item" v-for="device in deviceData" :key="device.name">
              <div class="device-info">
                <el-icon size="24" :style="{ color: device.color }">
                  <component :is="device.icon" />
                </el-icon>
                <div class="device-details">
                  <div class="device-name">{{ device.name }}</div>
                  <div class="device-percentage">{{ device.percentage }}%</div>
                </div>
              </div>
              <div class="device-value">{{ device.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'AnalyticsOverview',
  setup() {
    const timeRange = ref('7d')
    
    const metrics = ref([
      {
        title: '总访问量',
        value: '125,432',
        change: '+12.5%',
        trend: 'up'
      },
      {
        title: '独立访客',
        value: '23,891',
        change: '+8.2%',
        trend: 'up'
      },
      {
        title: '页面浏览量',
        value: '456,789',
        change: '+15.3%',
        trend: 'up'
      },
      {
        title: '平均停留时间',
        value: '2:35',
        change: '-3.1%',
        trend: 'down'
      }
    ])
    
    const pageRanking = ref([
      { page: '/dashboard', views: 12543 },
      { page: '/user-management', views: 8765 },
      { page: '/analytics', views: 6543 },
      { page: '/settings', views: 4321 },
      { page: '/reports', views: 3210 }
    ])
    
    const regionData = ref([
      { name: '北京', percentage: 85, value: '12,543' },
      { name: '上海', percentage: 70, value: '8,765' },
      { name: '广州', percentage: 65, value: '6,543' },
      { name: '深圳', percentage: 50, value: '4,321' },
      { name: '杭州', percentage: 40, value: '3,210' }
    ])
    
    const deviceData = ref([
      { name: '桌面端', percentage: 68, value: '85,432', icon: 'Monitor', color: '#409eff' },
      { name: '移动端', percentage: 28, value: '35,123', icon: 'Cellphone', color: '#67c23a' },
      { name: '平板端', percentage: 4, value: '5,012', icon: 'Finished', color: '#e6a23c' }
    ])
    
    return {
      timeRange,
      metrics,
      pageRanking,
      regionData,
      deviceData
    }
  }
}
</script>

<style scoped>
.analytics-overview {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-card {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #fafafa;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.metric-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.metric-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.metric-trend.up {
  color: #67c23a;
}

.metric-trend.down {
  color: #f56c6c;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.chart-placeholder {
  text-align: center;
}

.ranking-list {
  padding: 0;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin-right: 12px;
  background-color: #909399;
}

.ranking-number.rank-1 {
  background-color: #f56c6c;
}

.ranking-number.rank-2 {
  background-color: #e6a23c;
}

.ranking-number.rank-3 {
  background-color: #67c23a;
}

.ranking-info {
  flex: 1;
}

.page-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.page-views {
  font-size: 12px;
  color: #909399;
}

.region-stats {
  padding: 0;
}

.region-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.region-item:last-child {
  margin-bottom: 0;
}

.region-name {
  width: 50px;
  font-size: 14px;
  color: #606266;
}

.region-progress {
  flex: 1;
}

.region-value {
  width: 60px;
  text-align: right;
  font-size: 14px;
  color: #303133;
}

.device-stats {
  padding: 0;
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.device-item:last-child {
  border-bottom: none;
}

.device-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-details {
  display: flex;
  flex-direction: column;
}

.device-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.device-percentage {
  font-size: 12px;
  color: #909399;
}

.device-value {
  font-weight: bold;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .metric-card {
    margin-bottom: 10px;
  }
  
  .region-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .region-progress {
    width: 100%;
  }
  
  .region-value {
    width: auto;
  }
}
</style>
